<!DOCTYPE html>
<html>
<head>
    <#include "/layout/baseHeader.ftl" />
</head>
<body>
<div id="app">
    <Row :gutter="24" class="g-fixgutter">
        <i-col span="12">
            <i-form ref="myForm" :model="form" :label-width="80">
                <Form-item label="权限角色">
                    <i-select v-model="form.arrRoleIds" multiple placeholder="请选择">
                        <template v-for="i in roleData">
                            <i-option :value="i.id.toString()" :label="i.name+' '+i.key"></i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="分配方式">
                    <radio-group v-model="uploadFormData.saveType">
                        <Radio label="add">
                            <span>增量添加</span>
                        </Radio>
                        <Radio label="update">
                            <span>覆盖原角色</span>
                        </Radio>
                    </radio-group>
                </Form-item>
                <Form-item label="数据内容">
                    <radio-group v-model="uploadFormData.dataType">
                        <Radio label="bossno">
                            <span>bossno</span>
                        </Radio>
                        <Radio label="userMobile">
                            <span>手机号</span>
                        </Radio>
                    </radio-group>
                </Form-item>
                <Form-item label="员工列表">
                    <Upload :action="uploadUri" name="file" :data="uploadFormData" :before-upload="beforeUpload"
                            :on-success="uploadSuccess" :on-error="uploadError" :max-size="1024">
                        <i-button type="ghost" icon="ios-cloud-upload-outline">上传文件
                        </i-button>
                    </Upload>
                </Form-item>
            </i-form>
            <p style="color:red">导入格式：新建一个txt，内容为一行一个数据</p>
        </i-col>
        <i-col span="12">
            <i-table :data="dtData" :columns="dtCols" :loading="loadingUser" :height="getTableHeight" size="small"
                     :highlight-row="true"
                     stripe></i-table>

            <div class="g-dg-footbar">
                <div>
                    <Page :total="total" :current="page" show-elevator show-sizer show-total placement="top"
                          @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                </div>
            </div>
        </i-col>
    </Row>


</div>

<script>
    const m_apis = {
        getRoleList() {
            return PB.apiRoute('/api/sys/role/getList', 'GET')
        },
        getUploadUser(p_body, p_page, p_pageSize, p_mark) {
            return PB.apiRoute('/api/sys/userzj/getUploadUser?pageNo=' + p_page + '&pageSize=' + p_pageSize + '&mark=' + p_mark, 'GET', p_body)
        },
        updateMRoles(p_mark, p_saveType, p_roleIds) {
            return PB.apiRoute('/api/sys/userzj/updateMRoles?mark=' + p_mark + '&saveType=' + p_saveType + '&roleIds=' + p_roleIds, 'POST')
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                page: 1,
                pageSize: 10,
                total: 0,
                loadingUser: false,
                roleData: [],
                form: {
                    arrRoleIds: []
                },
                uploadFormData: {
                    mark: '',
                    saveType: 'update',
                    dataType: 'bossno'
                },
                uploadUri: '/api/sys/userzj/uploadMSetRole',
                dtData: [],
                dtCols: [

                    {
                        title: '用户名',
                        key: 'userName'
                    },
                    {
                        title: 'BOSS工号',
                        key: 'bossno'
                    },
                    {
                        title: 'portal账号',
                        key: 'portalno'
                    }

                ]
            }
        },
        created() {
            this.initData(function (that) {

            });
        },
        computed: {
            getTableHeight() {
                return (window.innerHeight - 100);
            }
        },
        methods: {
            initData(callbak) {
                let that = this;
                PB.showLoading();
                let loadRoles = new Promise(function (resolve, reject) {
                    PB.ajax(that.apis.getRoleList(), {
                        showLoading: false, myFail: function () {
                            reject();
                            PB.hideLoading();
                        }
                    }, function (d) {
                        that.roleData = d.data;
                        resolve();
                    });
                });

                Promise.all([loadRoles]).then(function (d) {
                    PB.hideLoading();
                    if (typeof callbak == 'function') {
                        callbak(that);
                    }
                })
            },
            loadData() {
                let that = this;
                PB.ajax(this.apis.getUploadUser(null, this.page, this.pageSize, this.uploadFormData.mark), {
                    myBeforeSend: function () {
                        that.loadingUser = true;
                    },
                    complete: function () {
                        that.loadingUser = false;
                    }
                }, function (d) {

                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            reload() {
                this.page = 1;
                this.loadData();
            },
            changePage(e) {
                this.page = e;
                this.loadData();
            },
            changePageSize(e) {
                this.page = 1;
                this.pageSize = e;
                this.loadData();
            },
            save() {
                //this.$refs['myForm'].validate((valid) => {
                //if (valid) {
                this.form.roleIds = this.form.arrRoleIds.length > 0 ? this.form.arrRoleIds.toString() : '';

                if (this.actionType == 'add') {
                    PB.alert('不支持添加同步用户')
                }
                else {
                    PB.ajax(this.apis.updateMRoles(this.uploadFormData.mark, this.uploadFormData.saveType, this.form.roleIds), {
                        timeout: 1000 * 120 * 10,
                        isInFramePage: true
                    }, function (d) {
                        PB.formPageSaveOK(d);
                    });
                }
                //} else {
                //    this.$Message.error('表单验证失败!');
                //    window.parent.formPageSaveError();
                //}
                //})
            },
            uploadSuccess(response, file, fileList) {
                let re = response;
                if (re.success) {
                    this.reload();
                }
                else {
                    this.dtData = [];
                    PB.alert(re.msg);
                }
            },
            uploadError(error, file, fileList) {
                PB.alert(error);
            },
            beforeUpload() {
                this.uploadFormData.mark = new Date().pattern('yyyyMMddHHmmss');
            }
        }
    });

    function save() {
        vm.save();
    }
</script>
</body>
</html>
